<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/01.css" />
		<link rel="stylesheet" href="css/vue.css" />
		<link rel="stylesheet" href="css/unpkg/style.css">
		<link rel="stylesheet" href="css/unpkg/index.css">
		<title></title>
	</head>
	<style>

	</style>

	<body>
		<div id="app" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
			<!--顶部logo+登录信息-->
			<div class="top_Box">
				<img class="logo" src="images/logo.jpg" />
				<div class="login_Box">
					<div class="key_Change" @click="showUpdatePassword=true;" style="margin-left: 10px;">修改密码</div>
					<div class="key_Change" @click="logout()">退出</div>
					<div class="user_Box">用户：{{admin.fullName}}</div>
				</div>
			</div>
			<div class="bottom_Box">
				<!--左侧导航-->
				<div class="Tab_Box">
					<div class="Tab tab_Cli"><img src="images/icon1.png"></div>
					<div class="Tab"><img src="images/icon2.png"></div>
					<div class="Tab"><img src="images/icon3.png"></div>
					<div class="Tab"><img src="images/icon4.png"></div>
					<div class="Tab"><img src="images/icon5.png"></div>
				</div>
				<!--右侧整体box-->
				<div class="main_Box">
					<!--通知内容-->
					<div class="news_Box">通知内容：通知内容</div>
					<!--数据区域-->
					<div class="data_Box">
						<div class="data_L">
							<div v-for="sheBei in sheBeiList">
								<div class="data_L_List" @contextmenu.prevent="sheBeiDBClick(sheBei)" @click="sheBeiClick(sheBei)" :class="{data_L_List_Cli:sheBeiId == sheBei.shebeiId}">{{sheBei.shebeiName}}<span v-if="sheBei.online == -1">离线</span></div>
							</div>
						</div>
						<!--修改外部容器-->
						<div class="data_R_Box">
							<div class="data_M">
								<div class="data_M_Title">温湿度模拟器</div>
								<div class="data_M_Table">
									<table width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td>指数名称</td>
											<td>标准值</td>
											<td>阙值</td>
											<td>/</td>
										</tr>
										<tr>
											<td>温度</td>
											<td>{{sheBei.wendu}}度</td>
											<td>{{sheBei.wendufz}}</td>
											<td>/</td>
										</tr>
										<tr>
											<td>湿度</td>
											<td>{{sheBei.shidu}}</td>
											<td>{{sheBei.shidufz}}</td>
											<td>/</td>
										</tr>
									</table>
								</div>
								<div class="data_M_Title">加速度模拟量</div>
								<div class="data_M_Table">
									<table width="100%" cellpadding="0" cellspacing="0">
										<tr>
											<td>指数名称</td>
											<td>X轴</td>
											<td>Y轴</td>
											<td>Z轴</td>
										</tr>
										<tr>
											<td>震动</td>
											<td>{{sheBei.x}}</td>
											<td>{{sheBei.y}}</td>
											<td>{{sheBei.z}}</td>
										</tr>
										<tr>
											<td>阙值</td>
											<td>{{sheBei.xfz}}</td>
											<td>{{sheBei.yfz}}</td>
											<td>{{sheBei.zfz}}</td>
										</tr>
									</table>
								</div>
								<div class="data_M_Title">监控数据</div>
								<div class="data_M_canves">
									<div class="canves_Box">
										<div class="canves" @click="canvesClick('container2')">
											<div id="container2"></div>
											<div class="container_Name">温湿度示意图</div>
										</div>
										<div class="canves" @click="canvesClick('container3')">
											<div id="container3"></div>
											<div class="container_Name">振动强度示意图</div>
										</div>
										<div class="canves_Margin"></div>
										<div class="canves" @click="canvesClick('container')">
											<div id="allmap" class="map_Small"></div>
											<!--<img src="images/map.png" class="map_Small">-->
											<div class="container_Name">GPS位置信息</div>
										</div>
										<div class="canves" @click="canvesClick('container4')">
											<div id="container4"></div>
											<div class="container_Name">剩余油量示意图</div>
										</div>
									</div>

								</div>

							</div>
							<div class="data_R">
								<div class="data_M_Title">氦压机状态</div>
								<div class="data_M_Table">
									<table width="100%" cellpadding="0" cellspacing="0" v-html="sheBei.hyjStatus">
										<!--<tr>
										<td>停机报警</td>
										<td>Z轴</td>
									</tr>
									<tr>
										<td>氦压机温度报警</td>
										<td>000</td>
									</tr>
									<tr>
										<td>温度环境报警</td>
										<td>000</td>
									</tr>
									<tr>
										<td>压力报警</td>
										<td>000</td>
									</tr>-->
									</table>
								</div>
								<div class="data_M_Title">发电机开关量</div>
								<div class="data_M_Table">
									<table width="100%" cellpadding="0" cellspacing="0" v-html="sheBei.shiStatus">
										<!--<tr>
										<td>发电带负载</td>
										<td></td>
									</tr>
									<tr>
										<td>水温高警告报警</td>
										<td></td>
									</tr>
									<tr>
										<td>油压低警告报警</td>
										<td></td>
									</tr>
									<tr>
										<td>燃油位低警告</td>
										<td></td>
									</tr>
									<tr>
										<td>电池电压过低警告报警</td>
										<td></td>
									</tr>
									<tr>
										<td>冷却液位低警告</td>
										<td></td>
									</tr>
									<tr>
										<td>温度传感器开路警告</td>
										<td></td>
									</tr>
									<tr>
										<td>油压传感器开路警告</td>
										<td></td>
									</tr>
									<tr>
										<td>燃油位传感器开路警告</td>
										<td></td>
									</tr>-->
									</table>
								</div>
								<div class="data_M_Title">发电机模拟量</div>
								<div class="data_M_Table">
									<table width="100%" cellpadding="0" cellspacing="0">
										<!--<tr>
										<td>停机报警</td>
										<td>Z轴</td>
									</tr>-->
										<tr>
											<td>发电机油温 ℃</td>
											<td>{{sheBei.youwen}}</td>
										</tr>
										<tr>
											<td>发电机油压 KPsi</td>
											<td>{{sheBei.youya}}</td>
										</tr>
										<tr>
											<td>发电机液位</td>
											<td>{{sheBei.yewei}}</td>
										</tr>
									</table>
								</div>
							</div>

						</div>

					</div>
				</div>
			</div>
			<!--弹窗-->
			<div class="mask" v-show="showUpdatePassword||showUpdateSheBei" style="display: none;"></div>
			<div class="mask_Key" v-show="showUpdatePassword" style="display: none;">
				<div class="mask_Key_Top">
					<div class="mask_Key_T_L">修改密码</div>
					<img class="mask_Close" src="images/close.png" @click="showUpdatePassword=false" />
				</div>
				<div class="mask_Info_Box">
					<div class="mask_Info">
						<div class="mask_Info_L">用户名：</div>
						<div class="mask_Info_R">{{admin.fullName}}</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">原始密码：</div>
						<div class="mask_Info_R">
							<input placeholder="请输入原始密码" v-model="oldPassword" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">新密码：</div>
						<div class="mask_Info_R">
							<input placeholder="请输入新密码" v-model="newPassword" />
						</div>
					</div>
				</div>
				<div class="mask_Btn" @click="submitUpdataPassword">确认</div>
			</div>
			<div class="mask_Key" v-show="showUpdateSheBei" style="display: none;">
				<div class="mask_Key_Top">
					<div class="mask_Key_T_L">设备管理</div>
					<img class="mask_Close" src="images/close.png" @click="showUpdateSheBei=false" />
				</div>
				<div class="mask_Info_Box">
					<div class="mask_Info">
						<div class="mask_Info_L">设备名称：</div>
						<div class="mask_Info_R">
							<input placeholder="输入设备名称" v-model="sheBei.shebeiName" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">设备id：</div>
						<div class="mask_Info_R">
							<input placeholder="输入设备id" v-model="sheBei.shebeiId" readonly="true" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">温度阙值：</div>
						<div class="mask_Info_R">
							<input placeholder="输入温度阙值" v-model="sheBei.wendufz" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">湿度阙值：</div>
						<div class="mask_Info_R">
							<input placeholder="输入湿度阙值" v-model="sheBei.shidufz" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">震动X：</div>
						<div class="mask_Info_R">
							<input placeholder="输入震动X阙值" v-model="sheBei.xfz" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">震动Y：</div>
						<div class="mask_Info_R">
							<input placeholder="输入震动Y阙值" v-model="sheBei.yfz" />
						</div>
					</div>
					<div class="mask_Info">
						<div class="mask_Info_L">震动Z：</div>
						<div class="mask_Info_R">
							<input placeholder="输入震动Z阙值" v-model="sheBei.zfz" />
						</div>
					</div>
				</div>
				<div class="mask_Btn" @click="submitUpdateSheBei">确认</div>
			</div>
			<div class="mask" style="display: none;" onclick="$('.mask').hide();$('.mask_Box').hide();$('#container11').hide();$('#container22').hide();$('#container33').hide();$('#container44').hide();"></div>
			<div class="mask_Box" style="display: none;">
				<div class="mask_Top">{{maskTitle}}<img src="../images/close.png" class="mask_Close" onclick="$('.mask').hide();$('.mask_Box').hide();$('#container11').hide();$('#container22').hide();$('#container33').hide();$('#container44').hide();"></div>
				<div class="mask_canve">
					<div id="container11" style="height:400px;display: none;"></div>
					<div id="container22" style="height:400px;display: none;"></div>
					<div id="container33" style="height:400px;display: none;"></div>
					<div id="container44" style="height:400px;display: none;"></div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/canves1.js"></script>
		<script type="text/javascript" src="../js/canves2.js"></script>
		<script type="text/javascript" src="../js/canves3.js"></script>
		<script type="text/javascript" src="../js/canves4.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
		<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
		<!--<script type="text/javascript" src="js/canves1.js"></script>
		<script type="text/javascript" src="js/canves2.js"></script>
		<script type="text/javascript" src="js/canves3.js"></script>
		<script type="text/javascript" src="js/canves4.js"></script>
		<script type="text/javascript" src="js/canves5.js"></script>-->
		
		<!--<script type="text/javascript" src="../js/canves5.js"></script>-->
		<script src="js/unpkg/vue.js"></script>
		<script src="js/unpkg/vue-router.js"></script>
		<script src="js/unpkg/axios.min.js"></script>
		<script src="js/unpkg/index.js"></script>
		<script src="js/unpkg/index2.js"></script>
		<script src="../js/configData.js"></script>
	</body>

	<!--<script>
		$(function(){
			$(".data_L_List").click(function(){
				$(".data_L_List").removeClass("data_L_List_Cli");
				$(this).addClass("data_L_List_Cli")
			})
		})
	</script>-->

</html>
<!-- VUE开始 -->
<script>
	var app = new Vue({
		el: '#app',
		data: {
			api: '', //接口地址
			type: 'login',
			loading: 'false', //加载
			admin: {}, //管理员对象
			sheBeiList: [], //设备集合
			sheBeiId: '', //设备ID
			showUpdatePassword: false, //是否显示修改密码框
			showUpdateSheBei: false, //是否显示修改设备框
			oldPassword: '', //旧密码
			newPassword: '', //新密码
			timeTask: "", //定时任务
			sheBeiTimeTask: "", //设备定时任务
			sheBei: {}, //设备对象
			maskTitle: '图表' //弹窗标题
		},
		created: function() {
			//获取数据
			this.getData();
			//核验登陆
			this.checkLogin();
			//获取设备
			this.getSheBeiList();
		},
		methods: {
			//获取数据
			getData: function() {
				let self = this;
				//获取接口地址
				self.api = serverIp;
				self.timeTask = setInterval(self.getSheBeiListByTimeTask, 5000);
			},
			//核对登陆
			checkLogin: function() {
				let self = this;
				if(localStorage.getItem("admin") == null) {
					self.$toast('请先登陆！');
					setTimeout(function() {
						location.href = 'login.html';
					}, 1000);
				} else {
					self.admin = JSON.parse(localStorage.getItem("admin"));
				}
			},
			//获取设备列表方法
			getSheBeiList: function() {
				let self = this;
				self.loading = true;
				//接口请求
				axios({
					method: 'post',
					url: self.api + '/HYJ/newSheBei/getSheBeiList',
					data: ''
				}).then(function(response) {
					if(response.data.errorCode == 0) {
						self.sheBeiList = response.data.result;
						//模拟单击设备
						self.sheBeiClick(self.sheBeiList[0]);
						self.loading = false;
						self.$toast({
							message: '加载成功！',
							iconClass: 'icon el-icon-success'
						});
					} else {
						self.$toast({
							message: response.data.msg,
							iconClass: 'icon el-icon-error'
						});
					}
				}).catch(function(error) {
					self.loading = false;
					self.$toast({
						message: '请求异常:' + error,
						iconClass: 'icon el-icon-warning'
					});
				});
			}, //获取设备列表方法
			getSheBeiListByTimeTask: function() {
				let self = this;
				let sheBeiIdList = "";
				self.sheBeiList.forEach(v => {
					sheBeiIdList += v.shebeiId + ",";
				});
				let params = "shebeiIdList=" + sheBeiIdList

				//				console.log(JSON.stringify(params))
				//接口请求
				axios({
					method: 'post',
					url: self.api + '/HYJ/newSheBei/getShebeiListOnTime',
					data: params
				}).then(function(response) {
					if(response.data.errorCode == 0) {
						self.sheBeiList = response.data.result;
					} else {
						console.log('定时获取设备出现问题:' + response.data.msg);
					}
				}).catch(function(error) {
					console.log('定时获取设备列表异常:' + error);
				});
			},
			//设备单击事件
			sheBeiClick(sheBei) {
				let self = this;
				clearInterval(self.sheBeiTimeTask);
				self.sheBeiId = sheBei.shebeiId;
				//获取详情
				self.getSheBeiById(self.sheBeiId, true);
				self.sheBeiTimeTask = setInterval(function() {
					self.getSheBeiById(self.sheBeiId, false);
				}, 100000);
			},
			logout(){
				location.href = 'login.html';
			},
			//提交修改密码
			submitUpdataPassword() {
				let self = this;
				if(self.oldPassword.length <= 0 || self.newPassword.length <= 0) {
					self.$toast({
						message: '请填写新密码和旧密码！',
						iconClass: 'icon el-icon-warning'
					});
					return
				}
				if(self.oldPassword !== self.admin.password) {
					self.$toast({
						message: '旧密码错误,请重新输入！',
						iconClass: 'icon el-icon-warning'
					});
					return
				}
				self.loading = true;
				let param = "userId=" + self.admin.id + "&password=" + self.newPassword;
				//接口请求
				axios({
					method: 'post',
					url: self.api + '/HYJ/user/changeUserPassword',
					data: param
				}).then(function(response) {
					if(response.data.errorCode == 0) {
						self.sheBeiList = response.data.result;
						self.loading = false;
						self.$toast({
							message: '修改成功,请重新登陆！',
							iconClass: 'icon el-icon-success'
						});
						setTimeout(function() {
							location.href = '../login.html';
						}, 2000);
					} else {
						self.$indicator.close();
						self.$toast({
							message: response.data.msg,
							iconClass: 'icon el-icon-error'
						});
					}
				}).catch(function(error) {
					self.loading = false;
					self.$toast({
						message: '请求异常:' + error,
						iconClass: 'icon el-icon-warning'
					});
				});
			},
			//根据ID获取指定设备
			getSheBeiById(sheBeiId, loading) {
				let self = this;
				if(loading) {
					self.loading = true;
				}
				let param = "shebeiId=" + sheBeiId;
				//接口请求
				axios({
					method: 'post',
					url: self.api + '/HYJ/newData/getDataByShebeiId',
					data: param
				}).then(function(response) {
					self.sheBei = response.data;
					//获取地图
					self.getMap(self.sheBei.youliangArray, self.sheBei.lat, self.sheBei.lng);
					//获取温度图
					self.getWenShidu(self.sheBei.wenduArray, self.sheBei.shiduArray);
					//获取震动图
					self.getZhenDong(self.sheBei.zhendongXArray, self.sheBei.zhendongYArray, self.sheBei.zhendongZArray);
					if(loading) {
						self.loading = false;
					}
				}).catch(function(error) {
					if(loading) {
						self.loading = false;
						self.$toast({
							message: '请求异常:' + error,
							iconClass: 'icon el-icon-warning'
						});
					}
				});
			},
			//获取地图
			getMap(youliang, lat, lng) {
				let self = this;
				let map = new BMap.Map("allmap");
				let point = new BMap.Point(lat, lng);
				map.centerAndZoom(point, 15);
				let marker = new BMap.Marker(point); // 创建标注

				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				map.addOverlay(marker); // 将标注添加到地图中

				let dom = document.getElementById("container4");
				let myChart = echarts.init(dom);
				let app = {};
				option = null;
				option = {
					textStyle: {
						color: '#8393B0'
					},
					xAxis: {
						type: 'category',
						data: self.sheBei.shuzi,
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						},
						splitLine: {
							lineStyle: {
								// 使用深浅的间隔色  
								color: ['#8393B0']
							}
						},
						nameTextStyle: {
							color: ['#8393B0']
						},
					},
					series: [{
						data: youliang,
						type: 'line',
						color: 'red'
					}]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			},
			//获取震动图
			getZhenDong(zhendongX, zhendongY, zhendongZ) {
				let self = this;
				let dom = document.getElementById("container3");
				let myChart = echarts.init(dom);
				let app = {};
				option = null;
				option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['x轴', 'y轴', 'z轴']
					},
					textStyle: {
						color: '#8393B0'
					},
					xAxis: {
						type: 'category',
						data: self.sheBei.shuzi,
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						},
						splitLine: {
							lineStyle: {
								// 使用深浅的间隔色  
								color: ['#8393B0']
							}
						},
						nameTextStyle: {
							color: ['#8393B0']
						},
					},
					series: [{
							name: "x轴",
							data: zhendongX,
							type: 'line',
							color: 'red'
						},
						{
							name: "y轴",
							data: zhendongY,
							type: 'line',
							color: '#50E3C2'
						},
						{
							name: "z轴",
							data: zhendongZ,
							type: 'line'
						}
					]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
				// JavaScript Document
			},
			//获取温度图
			getWenShidu(wendu, shidu) {
				let self = this;
				let dom = document.getElementById("container2");
				let myChart = echarts.init(dom);
				let app = {};
				option = null;
				option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['温度', '湿度']
					},
					textStyle: {
						color: '#8393B0'
					},
					xAxis: {
						type: 'category',
						data: self.sheBei.shuzi,
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#8393B0',
								width: 1, //这里是为了突出显示加上的  
							}
						},
						splitLine: {
							lineStyle: {
								// 使用深浅的间隔色  
								color: ['#8393B0']
							}
						},
						nameTextStyle: {
							color: ['#8393B0']
						},
					},
					series: [{
							name: "温度",
							data: wendu,
							type: 'line',
							color: 'red'
						},
						{
							name: "湿度",
							data: shidu,
							type: 'line',
							color: '#50E3C2'
						}
					]
				};;
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			},
			//画布点击
			canvesClick(type) {
				let self = this;
				$(".mask").show();
				$(".mask_Box").show();

				if(type == "container2") {
					self.maskTitle = '温湿度示意图';
					var dom = document.getElementById("container11");
					$("#container11").show();
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					option = {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['温度', '湿度']
						},
						toolbox: {
							show: true,
							feature: {
								dataZoom: {
									yAxisIndex: 'none'
								},
								dataView: {
									readOnly: false
								},
								magicType: {
									type: ['line', 'bar']
								},
								restore: {},
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: self.sheBei.shuzi,
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: '温度',
								data: self.sheBei.wenduArray,
								type: 'line'
							},
							{
								name: '湿度',
								data: self.sheBei.shiduArray,
								type: 'line'
							}
						]
					};
					if(option && typeof option === "object") {
						myChart.setOption(option, true);
					}
				} else if(type == "container3") {
					self.maskTitle = '振动强度示意图';
					var dom = document.getElementById("container22");
					$("#container22").show();
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					option = {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['x轴', 'y轴', 'z轴']
						},
						toolbox: {
							show: true,
							feature: {
								dataZoom: {
									yAxisIndex: 'none'
								},
								dataView: {
									readOnly: false
								},
								magicType: {
									type: ['line', 'bar']
								},
								restore: {},
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: self.sheBei.shuzi,
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: 'x轴',
								data: self.sheBei.zhendongXArray,
								type: 'line'
							},
							{
								name: 'y轴',
								data: self.sheBei.zhendongYArray,
								type: 'line'
							},
							{
								name: 'z轴',
								data: self.sheBei.zhendongZArray,
								type: 'line'
							}
						]
					};;
					if(option && typeof option === "object") {
						myChart.setOption(option, true);
					}
					// JavaScript Document
				} else if(type == "container") {
					self.maskTitle = 'GPS位置信息';
					// 百度地图API功能
					var map = new BMap.Map("container33");

					var point = new BMap.Point(self.sheBei.lat, self.sheBei.lng);
					map.centerAndZoom(point, 15);
					var marker = new BMap.Marker(point); // 创建标注

					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
					map.addOverlay(marker); // 将标注添加到地图中
					$("#container33").show();
					setTimeout(function() {
						map.setZoom(14);
					}, 200); //2秒后放大到14级
					map.enableScrollWheelZoom(true);

					var top_left_control = new BMap.ScaleControl({
						anchor: BMAP_ANCHOR_TOP_LEFT
					}); // 左上角，添加比例尺
					var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
					var top_right_navigation = new BMap.NavigationControl({
						anchor: BMAP_ANCHOR_TOP_RIGHT,
						type: BMAP_NAVIGATION_CONTROL_SMALL
					}); //右上角，仅包含平移和缩放按钮

					//						map.addControl(top_left_control);
					//						map.addControl(top_left_navigation);
					map.addControl(top_right_navigation);

					$("#container33").show();
					/*var point = new BMap.Point(116.404, 39.915);
					map.centerAndZoom(point, 15);*/

					//						var marker = new BMap.Marker(new BMap.Point(lat, lng)); // 创建点
					//						map.addOverlay(marker); //增加点
				} else if(type == "container4") {
					self.maskTitle = '剩余油量示意图';
					var dom = document.getElementById("container44");
					$("#container44").show();
					var myChart = echarts.init(dom);
					var app = {};
					option = null;
					option = {
						tooltip: {
							trigger: 'axis'
						},
						toolbox: {
							show: true,
							feature: {
								dataZoom: {
									yAxisIndex: 'none'
								},
								dataView: {
									readOnly: false
								},
								magicType: {
									type: ['line', 'bar']
								},
								restore: {},
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: self.sheBei.shuzi,
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: self.sheBei.youliangArray,
							type: 'line'
						}]
					};;
					if(option && typeof option === "object") {
						myChart.setOption(option, true);
					}
					// JavaScript Document
				}
			},
			//设备双击事件
			sheBeiDBClick(sheBei) {
				let self = this;
				self.sheBei = sheBei;
				self.showUpdateSheBei = true;
			},
			//提交设备修改功能
			submitUpdateSheBei() {
				let self = this;
				self.loading = true;
				let param = 'shebeiId=' + self.sheBei.shebeiId + '&shebeiName=' + self.sheBei.shebeiName + '&wendufz=' + self.sheBei.wendufz + '&shidufz=' + self.sheBei.shidufz + '&xfz=' + self.sheBei.xfz + '&yfz=' + self.sheBei.yfz + '&zfz=' + self.sheBei.zfz;
				//接口请求
				axios({
					method: 'post',
					url: self.api + '/HYJ/newSheBei/updateShebei',
					data: param
				}).then(function(response) {
					if(response.data.status == 'success') {
						self.sheBeiList = response.data.result;
						self.loading = false;
						self.$toast({
							message: '修改成功。',
							iconClass: 'icon el-icon-success'
						});
						self.showUpdateSheBei = false;
						//获取设备
						self.getSheBeiList();
					} else {
						self.$indicator.close();
						self.$toast({
							message: response.data.msg,
							iconClass: 'icon el-icon-error'
						});
					}
				}).catch(function(error) {
					self.loading = false;
					self.$toast({
						message: '请求异常:' + error,
						iconClass: 'icon el-icon-warning'
					});
				});
			}
		}
	});
</script>
<!-- VUE结束 -->